<template>
    <div class=''>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="操作人员姓名">
                <el-input v-model="form.operator" placeholder="请输入操作人员姓名" />
            </el-form-item>
            <el-form-item label="供货商">
                <el-select v-model="form.supplier" placeholder="请选择供货商">
                    <el-option v-for="item in shangpionList" :key="item.id" :label="item.supplier"
                        :value="item.supplier">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="进货时间">
                <el-col :span="11">
                    <el-date-picker v-model="form.startTime" type="date" value-format="YYYY-MM-DDTHH:mm:ss.000Z"
                        placeholder="开始时间" style="width: 100%" />
                </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">---</span>
                </el-col>
                <el-col :span="11">
                    <el-date-picker v-model="form.endTime" type="date" value-format="YYYY-MM-DDTHH:mm:ss.000Z"
                        placeholder="结束时间" style="width: 100%" />
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>


        <el-form-item>
            <el-button type="success" @click="showPopup = true">新增供货商品</el-button>
        </el-form-item>

        <popup :visible="showPopup" @close="closePopup">
            <template v-slot:header>
                <h4>{{ addForm.id ? '编辑商品' : '新增供货商品' }}</h4>
            </template>
            <template v-slot:content>
                <el-form :model="addForm" label-width="auto" style="max-width: 400px">
                    <el-form-item label="供货商">
                        <el-input v-model="addForm.supplier" placeholder="请输入供货商" />
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="addForm.productName" placeholder="请输入商品名称" />
                    </el-form-item>
                    <el-form-item label="商品单价">
                        <el-input type="number" v-model="addForm.price" placeholder="请输入单价" />
                    </el-form-item>
                    <el-form-item label="操作人员">
                        <el-input v-model="addForm.operator" placeholder="请输入操作人员姓名" />
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input type="number" v-model="addForm.quantity" placeholder="请输入数量" />
                    </el-form-item>
                    <el-form-item label="商品照片">
                        <el-upload class="avatar-uploader" action="http://localhost:8080/uploadImage" :show-file-list="false"
                            :on-change="handleFileChange" :before-upload="beforeUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="商品总价">
                        <span>{{ totalPricePrice }}</span>
                    </el-form-item>
                </el-form>
            </template>
            <template v-slot:footer>
                <el-button type="primary" @click="add">保存</el-button>
            </template>
        </popup>


        <el-table :data="shangpionList" border>
            <el-table-column type="index" width="80" label="序号" />
            <el-table-column prop="productName" label="商品名称" />
            <el-table-column prop="quantity" label="商品编号" />
            <el-table-column prop="supplier" label="供货商" />
            <el-table-column prop="price" label="单价" />
            <el-table-column prop="quantity" label="数量" />
            <el-table-column prop="totalPrice" label="总价" />
            <el-table-column prop="purchaseTime" label="进货时间" width="180" />
            <el-table-column label="商品照片" prop="image">
                <template v-slot:default="scope"></template>
            </el-table-column>
            <el-table-column prop="operator" label="操作人" />
            <el-table-column label="操作">
                <template v-slot:default="scope">
                    <el-button @click="editProduct(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="deleteShangpin(scope.row.id)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>

    <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" :total="50" prev-text="上一页" next-text="下一页" />
    </div>

</template>

<script>
import Popup from './add.vue'
import { getUserInfo, addProduct, deleteProduct, queryProduct, updateProduct } from '../api/ghs/ghsApi'
import { reactive } from 'vue';

export default {
    data() {
        return {

            form: reactive({
                supplier: '',         //供货商
                startTime: '',     //开始日期
                endTime: '',  //结束日期
                operator: '',     //操作人姓名
            }),
            shangpionList: [],
            showPopup: false,

            addForm: {
                productName: '',
                price: '',
                quantity: '',
                operator: '',
                supplier: '',
            },
        };
    },
    // 计算总价
    computed: {
        totalPricePrice() {
            return (parseFloat(this.addForm.price) || 0) * (parseFloat(this.addForm.quantity) || 0);
        },
    },
    components: {
        Popup,
    },
    created() {
        this.queryList()
    },
    mounted() {

    },
    methods: {
        // 条件查询
        query() {
            queryProduct(this.form).then(res => {
                console.log(res);
                this.shangpionList = res.data;
            }).catch(err => {
                console.log(err);
            });
        },

        // 重置
        reset() {
            this.form = {
                supplier: '',
                purchaseTime: '',
                purchaseTimeEnd: '',
                operator: '',
            };
        },

        // 新增供货商品
        add() {
            if (!this.addForm.productName || !this.addForm.price || !this.addForm.quantity) {
                alert('请输入商品名称、单价和数量');
                return;
            }

            const totalPrice = this.totalPricePrice;
            this.addForm.totalPrice = totalPrice;

            // 判断是否为编辑状态
            if (this.addForm.id) {
                // 编辑模式
                updateProduct({
                    ...this.addForm,
                    totalPrice: totalPrice
                }).then(res => {
                    console.log(res);
                    // 替换对应项
                    const index = this.shangpionList.findIndex(item => item.id === this.addForm.id);
                    this.shangpionList.splice(index, 1, res.data);
                    this.showPopup = false;
                    this.queryList();
                }).catch(err => {
                    console.log(err);
                });
            } else {
                // 新增模式
                addProduct({
                    ...this.addForm,
                    totalPrice: totalPrice
                }).then(res => {
                    console.log(res);
                    this.shangpionList.push(res.data);
                    this.showPopup = false;
                    this.queryList();
                }).catch(err => {
                    console.log(err);
                });
            }
        },

        // 编辑供货商品
        editProduct(row) {
            // 将行数据填充到 addForm
            this.addForm = {
                id: row.id, // 存储 ID 以便后续更新
                productName: row.productName,
                price: row.price,
                quantity: row.quantity,
                operator: row.operator,
                supplier: row.supplier,
                file: null, // 如果需要更新文件，也要管理这个字段
            };
            this.imageUrl = row.image; // 若行数据中有图片字段，可以使用它来显示当前图片
            this.showPopup = true; // 显示弹出框
        },

        // 删除
        deleteShangpin(id) {
            if (confirm('确认删除该商品吗？')) {
                deleteProduct(id).then(res => {
                    console.log(res);
                    this.queryList();
                }).catch(err => {
                    console.log(err);
                });
            }
        },

        // 关闭弹窗
        closePopup() {
            this.showPopup = false;
        },

        // 查询列表
        queryList() {
            getUserInfo().then(res => {
                console.log(res.data);
                this.shangpionList = res.data;
                console.log(res);
            }).catch(err => {
                console.log(err);
            });
        }

    },
};
</script>

<style></style>